<template>
  <div class="hotlist">
<span @click="$router.go(-1)">&lt; &nbsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; 热榜</span>
<div class="nav"><ul>
  <li @click="ques" :class="currentindex==0? 'active':''">问题榜</li>
  <li @click="hotde" :class="currentindex==1? 'active':''">热评榜</li>
  <li @click="content" :class="currentindex==2? 'active':''">好文榜</li>
  <li @click="topic" :class="currentindex==3? 'active':''">话题榜</li>
</ul></div>
<router-view></router-view>
  </div>
</template>

<script>
export default {
data(){return {
   currentindex:0
}
 
},
methods:{
ques(){
  this.currentindex=0
  this.$router.push('/hotquestion')
},
hotde(){
  this.currentindex=1
  this.$router.push('/hotde')
},
content(){
  this.currentindex=2
  this.$router.push('/hotcontent')
},
topic(){
  this.currentindex=3
  this.$router.push('/hottopic')
}
}
}
</script>

<style lang="scss" scoped>
.nav{width: 100%;
  height: .5rem;
  ul{width: 100%;
  height: .7rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;

  }
}
</style>